<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="注册common.css">
  <link rel="stylesheet" href="注册.css">

</head>
<style>
  body, button, input, select, textarea {
    font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  }
  address, cite, dfn, em, var {
    font-style: normal;
  }
  *{
    margin: 0;
    padding: 0;
  }
  input{
    zoom: 130%;
  }
  body{
    background-color: #eae8eb;
  }
  .car-content {
    width: 1190px;
    margin: 30px auto;
    background-color: #eae8eb;
  }
  .car{
    min-height: 200px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    overflow: hidden;
    background-color: #ffffff;
  }
  .car-bar{
    overflow: hidden;
    font-size: 12px;
    position: relative;
    height: 72px;
    padding: 0 18px;
    border-bottom: 1px solid #e6e6e6;
  }
  .car-num{
    overflow: hidden;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    height: 72px;
    line-height: 72px;
  }
  .car-money {
    position: absolute;
    right: 18px;
    top: 0;
    height: 72px;
    line-height: 72px;
    font-size: 14px;
  }
  .car-money .car-text-pay {
    position: relative;
    top: -2px;
  }
  .car-price {
    font-family: Arial,Verdana;
    font-weight: 400;
    margin-right: 12px;
    font-size: 22px;
    color: #FF5000;
  }
  .price em {
    font-family: Verdana,Arial;
    padding-left: 2px;
    font-weight: 500;
  }
  .total-sym {
    font-size: 12px;
    font-weight: 400;
  }
  .submit-btn {
    display: inline-block;
    width: 74px;
    height: 42px;
    line-height: 42px;
    color: #fff;
    background: #FF5000;
    border-radius: 21px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    top: -2px;
    font-size: 16px;
  }
  .main {
    min-height: 210px;
  }
  .table-th {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    color: #3c3c3c;
    font-weight: 700;
  }
  .checkbox input{
    position: absolute;
    z-index: 1;
    left: -10px;
    top: 14px;
  }
  .list{
    font-size: 17px;
    float: left;
    display: inline-block;
    margin-top: -82px;
    margin-left: 75px;
    overflow: hidden;
  }
  .list td{
    padding: 80px;
  }
  .shop-info span{
    font-size: 15px;
    margin-top: 0px;
    position: absolute;
  }
  .shop-info input{
    margin-top: 3px;
    margin-left: 20px;

  }
  .order-content{
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    border-radius: 18px;
    height: 133px;
    margin: 0 24px;
    position: absolute;
    width: 1140px;
  }
  .shop-info span a{
    font-size: 13px;
    text-decoration: none;
    color: #000000;
  }
  .shop-info span a:hover{
    color: #ff4400;
  }
  .order-content ul{
    margin-left: 30px;
    margin-top: 15px;
  }
  li{
    display: inline-block;
  }
  ul{
    padding:0;
    margin: 0;
    list-style: none;
    display: inline-block;
  }
  .item{
    height: 120px;
  }
  .car-content1 .check-btn {
    height: 20px;
    position: absolute;
  }
  .img{
    margin-top:0px;
    margin-left: 20px;
    display: inline-block;
  }
  .item-text{
    position: absolute;
    display: inline-block;
    width: 120px;
    margin-bottom: 50px;

  }
  .item-text a{
    text-decoration: none;
    color:#3c3c3c;
    position: absolute;
    top: 21px;
    font-size: 13px;
  }
  .item-text a:hover{
    color: #ff4400;
  }
  .information{
    font-size: 15px;
    position: absolute;
    left: 340px;
    top: 0px;
    height: 132px;
    text-align: center;
  }
  .information span{
    position: relative;
    top: 50px;
      width: 100px;
  }
  .mid-price{
    height: 120px;
    width: 100px;
    display: inline-block;
    left: 420px;
    position: absolute;
    text-align: center;
  }
  .mid-price em {
    position: relative;
    color: #3c3c3c;
    font-weight: 700;
    font-size: 15px;
    font-family: Verdana,Tahoma,arial;
    top: 50px;
  }
  .mid-num{
    height: 120px;
    width: 100px;
    display: inline-block;
    left: 560px;
    position: absolute;
    text-align: center;
  }
  .mid-num em{
    position: relative;
    color: #3c3c3c;
    font-weight: 700;
    font-size: 15px;
    font-family: Verdana,Tahoma,arial;
    top: 50px;
  }
  .mid-amount{
    height: 120px;
    width: 100px;
    display: inline-block;
    left: 780px;
    position: absolute;
    text-align: center;
  }
  .mid-amount span{
    position: relative;
    color: #f40;
    font-weight: 700;
    font-size: 18px;
    top: 50px;
  }
  .mid-co{
    height: 120px;
    width: 100px;
    display: inline-block;
    left: 970px;
    position: absolute;
    text-align: center;
  }
  .mid-co a{
    position: relative;
    text-decoration: none;
    font-size: 16px;
  }
  .mid-co a:hover{
    color: chocolate;
  }
  .car-po{
    left: 33px;
    text-align: center;
    position: absolute;
    top: 50px;
    height: 25px;
  }

  .FuHao{
    color: crimson;
    font-size: 18px;
    position: absolute;
    top: 50px;
  }
  .car-money select{
      width: 100px;
      height: 25px;
      border-radius: 5px;
  }
  select option{
      font-size: 16px;
  }
  .car-po{
      font-size: 13px;
  }
  .car-po input{
      background-color: #eab8b8;
      border-radius: 4px;
      cursor: pointer;
  }
  .car-po input:hover{
      background-color: chocolate;
  }
</style>
<body>
<script src="lib/vue-2.6.12.js"></script>
<div class="shortcut">
  <div class="wrapper">
    <i class="avatar"></i>
    <ul>
      <li><a href="登录login.html" id="top">您好！请先登录</a></li>
      <li><a href="注册导航.html">免费注册</a></li>
      <li><a href="index.html">主页</a></li>
      <li><a href="ShopCar.html">购物车</a></li>
      <li><a href="#">收货中心</a></li>
      <li><a href="homePage.html">个人中心</a></li>
      <li><a href="视觉介绍.html"><span></span>官网</a></li>
    </ul>
  </div>
</div>
<div class="all">
<div class="car-content" id="contr_vue">
  <div class="car-banner">
    <div class="car">
      <div class="car-nav">
        <div class="car-bar">
          <span class="car-num">我的订单 （全部）</span>
          <div class="car-money">
              <select v-model.num="value_1">
                  <option value="1">全部订单</option>
                  <option value="2">已完成</option>
                  <option value="3">商家未发货</option>
              </select>
              <span><a href="#" @click="search">检索数据</a></span>
          </div>
        </div>
        <div class="main">
          <div class="table-th">
            <table class="list">
              <tr>
                <td>商品信息</td>
                <td>收货人</td>
                <td>收货地址</td>
                <td>金额</td>
                <td>状态</td>
              </tr>
            </table>
          </div>
<!--          <div class="add">-->
<!--                                    <div class="main">-->
<!--                                            <div class="order-content">-->
<!--                                                <ul class="car-content1">-->
<!--                                                    <li class="item">-->
<!--                                                        <div class="img">-->
<!--                                                            <img src="" height="110">-->
<!--                                                        </div>-->
<!--                                                        <div class="item-text">-->
<!--                                                            <a href="#">休闲可以到达的大家解答解答解答解答急啊家的鞋子</a>-->
<!--                                                        </div>-->
<!--                                                    </li>-->
<!--                                                </ul>-->
<!--                                                <div class="information">-->
<!--                                                    <span>收货人</span>-->
<!--                                                </div>-->
<!--                                                <div class="mid-num">-->
<!--                                                    <em>重庆财经学院</em>-->
<!--                                                </div>-->
<!--                                                <div class="mid-amount">-->
<!--                                                    <div class="FuHao">￥</div>-->
<!--                                                    <span class="count-price">69.00</span>-->
<!--                                                </div>-->
<!--                                                <div class="mid-co">-->
<!--                                                    <div class="car-po" >-->
<!--                                                        <span>已收货</span>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->

<!--                                    </div>-->

<!--          </div>-->
<!--        </div>-->
        <!--                渲染-->
        <!--                渲染-->
        <div class="footer"></div>
      </div>
    </div>
  </div>
</div>
</div>
<script>

    const FirstLi=document.querySelector('.shortcut ul li:nth-child(1)')
    const SecondLi=FirstLi.nextElementSibling
    const uname=JSON.parse(localStorage.getItem('YM'))
  function renderht(){
    const uname=JSON.parse(localStorage.getItem('YM'))
    console.log(uname)
    if (uname){
      FirstLi.innerHTML=`<a href="javascript:;"><i class="iconfont"><img src="img/用户-角色-用户名-单人_jurassic.jpg" alt="" height="30">${uname}</i></a>`
      SecondLi.innerHTML=`<a href="javascript:;">退出登录</a>`
    }
    else{
      FirstLi.innerHTML=`<a href="登录login.html">您好！请先登录</a>`
      SecondLi.innerHTML=`<a href="注册导航.html">免费注册</a>`

    }
  }
  renderht()
  SecondLi.addEventListener('click',function (){
    localStorage.removeItem('YM')
    renderht()
  })
  const ShopCar=document.querySelector('.wrapper li:nth-child(4) a')
  ShopCar.addEventListener('click',function (e){
    e.preventDefault()
    const uname=JSON.parse(localStorage.getItem('YM'))
    if (!uname){
      alert('请先登录！')
    }
    else {
      window.location.href="ShopCar.html"
    }

  })
    const arr=JSON.parse(localStorage.getItem('goods'))||[]
    console.log(arr)
    const vm = new Vue({
        // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '.all',
        // data 对象就是要渲染到页面上的数据
        data: {
            // 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
        },
        methods:{
            yes(e){
                console.log(123)
                    if (e.target.tagName==='A'){
                        console.log(e.target.dataset.id)
                    }
                    if (confirm('您确定收货吗？')){
                        arr[e.target.dataset.id].status=1
                        window.location.href="收货中心.html"
                        localStorage.setItem('goods',JSON.stringify(arr))
                    }
            }
        }
    })
    render()
</script>
</body>
</html>